<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <b>岗位申请量</b>
          </div>
          <div>21</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <b>岗位需求量</b>
          </div>
          <div>34</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <b>项目总量</b>
          </div>
          <div>3</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <b>剩余资金</b>
          </div>
          <div>12345</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="chart-line">
          <Chart :Option="option_line"></Chart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-pie">
          <Chart :Option="option_pie"></Chart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Chart from "../components/Chart.vue";

export default {
  data() {
    return {
      option_line: {
        title: {
          text: "本周岗位申请量",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [2, 4, 3, 3, 2, 3, 4],
            type: "line",
            smooth: true,
          },
        ],
      },
      option_pie: {
        title: {
          text: "项目占比",
          subtext: "申请岗位所属项目",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "项目占比",
            type: "pie",
            radius: "50%",
            data: [
              { value: 10, name: "图书馆" },
              { value: 5, name: "教学楼" },
              { value: 6, name: "资料" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  components: {
    Chart,
  },
};
</script>

<style lang="less" scoped>
</style>